<template>
  <div class="member">
    <div class="content">
      <ul>
        <li v-for="(item, index) in member" :key="index">
          <img :src="item.avatar" alt="加载中……" />
          <div class="one">{{ item.username }}</div>
          <span>{{ item.role }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { listUserByTeamIdApi } from "@/api/user/api";
import { TeamUserInfo } from "@/api/user/type";
import { useTeamStore } from "@/stores/team.sotre";
import { storeToRefs } from "pinia";
import { onBeforeMount, reactive } from "vue";

const teamStore = useTeamStore();
const { teamInfo } = storeToRefs(teamStore);

const member = reactive<TeamUserInfo[]>([]);

teamStore.$subscribe(() => {
  if (teamInfo.value?.id) {
    listUserByTeamIdApi(teamInfo.value?.id).then((res) => {
      member.length = 0;
      Object.assign(member, res.data);
    });
  }
});
onBeforeMount(() => {
  if (teamInfo.value?.id) {
    listUserByTeamIdApi(teamInfo.value?.id).then((res) => {
      member.length = 0;
      Object.assign(member, res.data);
    });
  }
});
</script>

<style lang="less" scoped>
ul {
  display: flex;
  flex-direction: row;
  background-color: antiquewhite;
  li {
    height: 80px;
    width: calc(33.33333333% - 1em);
    margin-left: 1em;
    margin-right: 1em;
    margin: 0.875em 0.5em;
    background-color: white;
    border: 1px solid #dce3e8;
    display: flex;
    flex-direction: row;
    .one {
      font-size: 15px;
      color: #005980;
      margin-right: 10px;
    }
    img {
      width: 2.5em;
      height: 2.5em;
      border-radius: 500rem;
      margin-right: 10px;
    }
    span {
      border-radius: 2px;
      height: 16px;
      border: 1px solid #dededf;
      font-size: 12px;
      padding: 2px 5px !important;
      margin: 5px;
      line-height: 13px;
    }
  }
}
.member {
  width: 100%;
  height: 100%;
  background-color: aqua;
}
.content {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
}
</style>
